<template>
    <!-- #ifdef H5 -->
    <uni-nav-bar title="押运信息" :statusBar="true" fixed :border="false" backgroundColor="#4BA9FB" color="#FFFFFF">
    </uni-nav-bar>

    <!-- 顶部内容 -->
    <u-sticky>
        <view class="topContent">
            <!-- 日期选择 -->
            <view class="dateContent" @click="isShowDatePicker = true">
                <image class="dateIcon" src="@/static/images/date_icon.png" mode="scaleToFill"/>
                <view class="dateTxt">{{ selectDate }}</view>
            </view>

            <!-- 箱包申请按钮 -->
            <view class="packageContent" @click="onPackageClick">
                <image class="package" src="@/static/images/package_icon.png" mode=""/>
                <text>箱包申请</text>
            </view>
        </view>
    </u-sticky>
    <!-- #endif -->

    <!-- #ifndef H5 -->
    <u-sticky>
        <uni-nav-bar title="押运信息" :statusBar="true" fixed :border="false" backgroundColor="#4BA9FB" color="#FFFFFF">
        </uni-nav-bar>

        <!-- 顶部内容 -->
        <view class="topContent">
            <!-- 日期选择 -->
            <view class="dateContent" @click="isShowDatePicker = true">
                <image class="dateIcon" src="@/static/images/date_icon.png" mode="scaleToFill"/>
                <view class="dateTxt">{{ selectDate }}</view>
            </view>

            <!-- 箱包申请按钮 -->
            <view class="packageContent" @click="onPackageClick">
                <image class="package" src="@/static/images/package_icon.png" mode=""/>
                <text>箱包申请</text>
            </view>
        </view>
    </u-sticky>
    <!-- #endif -->

    <!-- 中间列表 -->
    <view class="taskList" v-if="listData.length>0">
        <!-- 条目 -->
        <view class="taskItem" v-for="(item,index) in listData" :key="index" @click="onTaskItemClick(item)">
            <view class="taskCenterLayout">
                <!-- 左侧内容 -->
                <view class="startContent">
                    <!-- 早送晚接状态 -->
                    <view class="taskCTypeTxt1" v-if="item.connectTypeName === '早送'">
                        {{ item.connectTypeName }}
                    </view>
                    <view class="taskCTypeTxt2" v-else-if="item.connectTypeName === '晚接'">
                        {{ item.connectTypeName }}
                    </view>
                    <view class="taskCTypeTxt3" v-else>{{ item.connectTypeName }}</view>

                    <!-- 线路 -->
                    <view class="drivingName" v-if="item.drivingName">{{ item.drivingName }}</view>

                    <!-- 开始图标 -->
                    <image class="taskStartImg" src="@/static/images/task_start_icon.png" mode="scaleToFill"/>
                </view>

                <!-- 中间内容 内部任务没有车辆-->
                <view class="taskCenterContent" v-if="item.dataType !== 'inside'">
                    <!-- 车辆图片 -->
                    <image class="carImg" v-if="item.securicarPicture" :src="item.securicarPicture" mode="scaleToFill"/>

                    <!-- 车牌号 -->
                    <view class="securicarLayout">
                        <view class="securicarBg"></view>
                        <view class="securicarTxt">{{ item.licensePlate }}</view>
                    </view>
                </view>
                <view v-else class="insideNotice">内部任务无车辆</view>

                <!-- 右侧内容 -->
                <view class="timeLayout">
                    <!-- 任务类型 -->
                    <view class="taskTypeContent">
                        <!-- 任务类型图标 -->
                        <image class="taskTypeImg" v-if="item.dataType === 'temporary'"
                               src="@/static/images/taskType1.png" mode="scaleToFill"/>
                        <image class="taskTypeImg" v-else src="@/static/images/taskType2.png"
                               mode="scaleToFill"/>

                        <!-- 任务类型名称 -->
                        <view class="taskTypeTxt" v-if="item.dataType === 'daily'">日常任务</view>
                        <view class="taskTypeTxt" v-else-if="item.dataType === 'batch'">批量任务</view>
                        <view class="taskTypeTxt" v-else-if="item.dataType === 'temporary'">临时任务</view>
                        <view class="taskTypeTxt" v-else-if="item.dataType === 'inside'">内部任务</view>
                        <view class="taskTypeTxt" v-else>未知任务</view>
                    </view>

                    <!-- 时间内容 -->
                    <view class="dateLayout">
                        <view class="centerDateTxt1">
                            时间
                        </view>
                        <view class="centerDateTxt2">
                            {{ dayjs(item.startTime).format("HH:mm") }}
                        </view>
                        <view class="centerDateTxt2">
                            {{ dayjs(item.endTime).format("HH:mm") }}
                        </view>
                    </view>
                </view>
            </view>

            <!-- 条目底部内容 -->
            <view class="taskBtm">
                <view class="btmTxtLayout">
                    <!-- 左侧名字 -->
                    <view class="btmTxt" v-if="item.dataType === 'inside'">{{ item.startDeptName }}</view>
                    <view class="btmTxt" v-else> {{ item.endDeptName ? '押运车' : item.startDeptName }}</view>
                    <!-- 箭头 -->
                    <image class="arrowIcon" v-if="item.connectType" src="@/static/images/task_arrow_right.png"
                           mode="scaleToFill"/>
                    <image class="arrowIcon" v-else src="@/static/images/task_arrow_left.png" mode="scaleToFill"/>
                    <!-- 右侧名字 -->
                    <view class="btmTxt" v-if="item.dataType === 'inside'">{{ item.endDeptName }}</view>
                    <view class="btmTxt" v-else> {{ item.endDeptName == null ? '押运车' : item.endDeptName }}</view>
                </view>
                <view class="lookDetails">查看详情 ></view>
            </view>
        </view>
    </view>

    <!--加载更多提示-->
    <view class="loadmore" v-if="listData.length>0">
        <u-loadmore :status="loadmoreStatus" :loading-text="loadingText" :loadmore-text="loadmoreText"
                    :nomore-text="nomoreText" line>
        </u-loadmore>
    </view>

    <view class="nodata" v-else>没有更多内容</view>

    <!-- 日期选择器 -->
    <u-datetime-picker ref="datetimePickerRef" :show="isShowDatePicker" v-model="datePickerDateTime" mode="date"
                       :formatter="formatter" @cancel="isShowDatePicker = false" @confirm="onDateConfirm">
    </u-datetime-picker>
</template>

<script setup>
import {ref} from "vue";
import {onLoad, onPullDownRefresh, onReachBottom, onReady} from "@dcloudio/uni-app";
import {myStore} from "@/stores";
import dayjs from "dayjs";
import *as Url from "@/net/Url";
import {getDictRequest, getListRequest} from "@/net/Api";

const store = myStore()
const datePickerDateTime = ref(Date.now());
const selectDate = ref(dayjs(Date.now()).format("YYYY-MM-DD"));
const isShowDatePicker = ref(false);
const datetimePickerRef = ref(null);
const listData = ref([]);
const dictList = ref([]);
const isResetData = ref(false);
const pageNo = ref(1);
const count = ref(0);
const loadmoreStatus = ref('loadmore');// loadmore / loading / nomore
const loadingText = ref("正在加载");
const loadmoreText = ref("加载更多");
const nomoreText = ref("没有更多了");

onLoad(async () => {
    getDict()
})

onReady(() => {
    // 微信小程序需要用此写法
    datetimePickerRef.value.setFormatter(formatter);
})

/**
 * 初始化数据
 */
const initData = () => {
    isResetData.value = true
    pageNo.value = 1
    loadmoreStatus.value = 'loadmore'
    getTaskListRequest()
}

/**
 * 下拉刷新
 */
onPullDownRefresh(() => {
    isResetData.value = true
    setTimeout(() => {
        uni.stopPullDownRefresh()
    }, 1000)
    initData()
})

/**
 * 触底加载
 */
onReachBottom(() => {
    isResetData.value = false
    pageNo.value = pageNo.value + 1
    uni.stopPullDownRefresh();
    if (count.value === listData.value.length)
        return
    getTaskListRequest()
})

/**
 * 处理加载状态
 */
const loadingStatus = () => {
    setTimeout(() => {
        if (count.value === listData.value.length) {
            loadmoreStatus.value = 'nomore'
        } else if (count > listData.value.length) {
            loadmoreStatus.value = 'loadmore'
        }
    }, 300)
}

/**
 * 日期格式化
 */
const formatter = (type, value) => {
    if (type === 'year') {
        return `${value}年`;
    }
    if (type === 'month') {
        return `${value}月`;
    }
    if (type === 'day') {
        return `${value}日`;
    }
    return value;
}

/**
 * 日期选择器确认事件
 */
const onDateConfirm = (e) => {
    isShowDatePicker.value = false
    datePickerDateTime.value = e.value
    selectDate.value = dayjs(e.value).format("YYYY-MM-DD")
    getTaskListRequest()
    console.log("onDateConfirm = ", selectDate.value)
}

/**
 * 任务条目点击事件
 */
const onTaskItemClick = (item) => {
    uni.navigateTo({
        url: `/pages/taskDetails/taskDetails?item=${encodeURIComponent(JSON.stringify(item))}&selectDate=${selectDate.value}`
    })
}

/**
 * 箱包申请点击事件
 */
const onPackageClick = (item) => {
    uni.navigateTo({
        url: `/pages/boxApplyList/boxApplyList`
    })
}

/**
 * 查询列表
 */
const getTaskListRequest = () => {
    let params = {
        pageNo: pageNo.value,
        pageSize: 10,
        date: selectDate.value
    }

    loadmoreStatus.value = 'loading'
    if (isResetData.value) {
        uni.showLoading()
    }
    getListRequest(params).then((res) => {
        // 判断是否需要清空数据
        if (isResetData.value) {
            uni.pageScrollTo({
                scrollTop: 0,
                duration: 0,
            })
            listData.value = []

            setTimeout(() => {
                uni.hideLoading()
            }, 500)
        }

        // 通过类型，赋值类型名称
        res.data.list.forEach(item => {
            item.securicarPicture = item.securicarPicture ? Url.FILE_HOST + item.securicarPicture : ""
        });

        // 设置数据
        listData.value.push(...res.data.list)
        count.value = parseInt(res.data.count)

        loadingStatus()
    }).catch((err) => {
        loadmoreStatus.value = 'nomore'
        uni.hideLoading()
    })
}

/**
 * 获取字典信息
 */
const getDict = () => {
    let params = {
        dictCode: "yayun_connect_type"
    }
    getDictRequest(params).then((res) => {
        dictList.value = res.data
        initData()
    }).catch((err) => {

    })
}

</script>

<style lang="scss" scoped>

.topContent {
    width: 100%;
    border-bottom: 1rpx solid #F1F1F1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 20rpx;
    background-color: #FFFFFF;
}

.dateContent {
    display: flex;
    align-items: center;
    border-radius: 50rpx;
    border: 1rpx solid #DDDDDD;
    box-sizing: border-box;
    padding: 10rpx 50rpx;
    margin-left: 10rpx;
}

.dateIcon {
    width: 60rpx;
    height: 60rpx;
}

.dateTxt {
    font-size: 34rpx;
    color: #333333;
    margin-left: 10rpx;
}

.packageContent {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-right: 10rpx;
}

.packageContent > text {
    font-size: 26rpx;
    color: #56AEFC;
}

.package {
    width: 60rpx;
    height: 60rpx;
}

.taskList {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    padding: 30rpx;
}

.taskItem {
    width: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background-color: #FFFFFF;
    border-radius: 15rpx;
    margin-bottom: 30rpx;
}

.itemTop {
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 30rpx;
}

.topStatusContent {
    display: flex;
    align-items: center;
    margin-top: 20rpx;
}

.taskCTypeTxt1 {
    font-size: 32rpx;
    font-weight: bold;
    color: #FFFFFF;
    border-radius: 10rpx;
    padding: 10rpx 20rpx;
    box-sizing: border-box;
    background-color: #f9ae3d;
}

.taskCTypeTxt2 {
    font-size: 32rpx;
    font-weight: bold;
    color: #FFFFFF;
    border-radius: 10rpx;
    padding: 10rpx 20rpx;
    box-sizing: border-box;
    background-color: #adadad;
}

.taskCTypeTxt3 {
    font-size: 32rpx;
    font-weight: bold;
    color: #FFFFFF;
    border-radius: 10rpx;
    padding: 10rpx 20rpx;
    box-sizing: border-box;
    background-color: $themeColor;
}

.taskStatus {
    width: 100rpx;
    height: 48rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    text-align: center;
}

.statusImg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.statusTxt {
    font-size: 28rpx;
    color: #FFFFFF;
    z-index: 90;
}

.taskTypeContent {
    width: 80rpx;
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-sizing: border-box;
    text-align: center;
    padding: 6rpx 0;
}

.taskTypeImg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.taskTypeTxt {
    width: 100%;
    height: 100%;
    font-size: 28rpx;
    color: #FFFFFF;
    z-index: 90;
}

.taskCenterLayout {
    height: 300rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    margin: 20rpx 0;
    padding: 0 30rpx;
}

.startContent {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.drivingName {
    font-size: 28rpx;
    color: #FFFFFF;
    background-color: $themeColor;
    border-radius: 15rpx;
    padding: 10rpx 20rpx;
    text-align: center;
}

.taskStartImg {
    margin-top: -10rpx;
    width: 120rpx;
    height: 130rpx;
}

.taskEndImg {
    width: 90rpx;
    height: 130rpx;
}

.taskCenterContent {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.timeLayout {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.dateLayout {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.centerDateTxt1 {
    font-weight: bold;
    font-size: 30rpx;
    color: #333333;
    margin-bottom: 10rpx;
}

.centerDateTxt2 {
    font-size: 28rpx;
    color: #333333;
}

.carImg {
    width: 240rpx;
    height: 240rpx;
    border-radius: 10rpx;
}

.centerLine {
    height: 14rpx;
    width: 100%;
    background-color: #4ba9fb;
    margin: 20rpx;
}

.securicarLayout {
    position: relative;
    width: 180rpx;
    height: 50rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-top: 20rpx;
}

.securicarBg {
    width: 100%;
    height: 100%;
    padding: 2rpx 10rpx;
    background-color: #F7F7F7;
    text-align: center;
    transform: skewX(-20deg);
    position: absolute;
}

.securicarTxt {
    width: 100%;
    height: 100%;
    color: #333333;
    background: transparent;
    position: absolute;
}

.taskBtm {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1rpx solid #F1F1F1;
    box-sizing: border-box;
    padding: 15rpx 30rpx;
}

.btmTxtLayout {
    display: flex;
    align-items: center;
}

.btmTxt {
    font-size: 32rpx;
    color: #333333;
}

.arrowIcon {
    width: 40rpx;
    height: 40rpx;
    margin: 0 10rpx;
}

.lookDetails {
    font-size: 30rpx;
    color: #999999;
}

.nodata {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 30rpx;
    color: #999999;
    letter-spacing: 1rpx;
}

.insideNotice {
    font-size: 32rpx;
    color: $main-color;
}

.loadmore {
    width: 100%;
}

</style>
